<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Transform</title>
    <style>
        body {
            margin: 50px;
        }

        div {
            display: inline-block;
        }

        hr {
            margin: 20px;
        }
    </style>
</head>
<body>
<hr>
<div id="example01">
    Skew(4deg, 6deg)
</div>
<style>
    #example01 {
        transform: skew(3deg, 6deg);
    }
</style>
<hr>

<div id="example02">
    translate(200px, 100px)
</div>
<style>
    #example02 {
        transform: translate(30px, 15px);
    }
</style>
<hr>

<div id="example03">
    rotate(15deg)
</div>
<style>
    #example03 {
        transform: rotate(15deg);
    }
</style>
<hr>

<div id="example04">
    rotate(15deg)
</div>
<style>
    #example04 {
        transform-origin: top left;
        transform: rotate(15deg);
    }
</style>
<hr>

<div id="example05">
    scale(1.25, 1.1)
</div>
<style>
    #example05 {
        /*transform: scale(1.25, 1.1);*/
        transform: scale(-1.5);
    }
</style>
<hr>

<div id="example06">
    multiple transform
</div>
<style>
    #example06 {
        transform: skew(-3deg, -10deg) translateX(-30px) scale(0.7);
    }
</style>
<hr>

<div id="example07">
    <article class="real">
        translateZ
    </article>
    <article class="ghost">
        translateZ
    </article>
</div>
<style>
    #example07 {
        position: relative;
    }

    #example07 article {
        position: absolute;
        transform: translate3D(20px, 40px, 300px);
    }

    #example07 article.real {
        transform: translateZ(100px);
    }
</style>
</body>
</html>